<template>

	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText">{{$t('back')}}</block>
			<block slot="content"><text class="text-black text-bold">{{i18n.title}}</text></block>
		</cu-custom>

		<view class="cu-form-group margin-top">
			<view class="content">
				<text class="text-gray">{{i18n.title}}</text>
			</view>
		</view>

		<view class="VerticalBox solid-top">
			<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="verticalNavTop" style="height:calc(100vh - 330upx)">
				<view class="cu-item" :class="index==tabCur?'text-green cur':''" v-for="(item,index) in list" :key="index" @tap="TabSelect"
				 :data-id="index">
					{{item.departname}}
				</view>
			</scroll-view>
			<scroll-view class="VerticalMain" scroll-y scroll-with-animation style="height:calc(100vh - 330upx)"
			 :scroll-into-view="'main-'+mainCur" @scroll="VerticalMain">
				<checkbox-group name="selectgroup">
					<view class="padding-top padding-lr" v-for="(item,index) in list" :key="index" :id="'main-'+index">
						<view class="cu-bar solid-bottom bg-white">
							<view class="action">
								<text class="cuIcon-title text-green"></text>
								{{item.departname}}
							</view>
						</view>
						<view class="cu-list menu-avatar">
							<view class="cu-item" v-for="(employ,eindex) in item.employeelist" :key="eindex" @click="ItemClick(employ)">
								<checkbox class="round blue" :class="employ.clicked?'checked':''" :checked="employ.clicked"></checkbox>
								<view class="cu-avatar round lg" :style="'background-image:url('+($constant.IMG_VERSION == $constant.OSS?employ.img:$constant.BASEURL+employ.img)+');'"></view>
								<view class="content">
									<view class="text-grey">{{employ.name}}</view>
									<view class="text-gray text-sm flex">
										<text class="text-cut">
											<!-- {{employ.userid}} -->
										</text> </view>
								</view>
							</view>
						</view>
					</view>
				</checkbox-group>
			</scroll-view>
		</view>

		<view class="bottom-float cu-bar bg-white solid-top">
			<text class="action text-blue text-sm">
				{{setlectTip}}
			</text>
			<view class="action">
				<button @tap="SubmitForm" class="cu-btn bg-blue shadow">{{i18n.sure}}</button>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		computed: {
			i18n() {
				return this.$t('personnel')
			},
		},
		data() {
			return {
				list: [],
				tabCur: 0,
				mainCur: 0,
				verticalNavTop: 0,
				load: true,
				setlectTip: this.$t('personnel').selectTips,
				select: []
			};
		},
		onLoad() {
			this.$constant.checkUserInfo()
			// console.log(this.select)
			uni.showLoading({
				title: this.$t('loading'),
				mask: true
			});
			this.InitData();
			uni.hideLoading()
		},
		methods: {
			TabSelect(e) {
				this.tabCur = e.currentTarget.dataset.id;
				this.mainCur = e.currentTarget.dataset.id;
				this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50
			},
			VerticalMain(e) {
				// #ifdef MP-ALIPAY
				return false //支付宝小程序暂时不支持双向联动 
				// #endif
				let that = this;
				let tabHeight = 0;
				if (this.load) {
					for (let i = 0; i < this.list.length; i++) {
						let view = uni.createSelectorQuery().select("#main-" + this.list[i].id);
						view.fields({
							size: true
						}, data => {
							let dataHeight = 0
							if(data.height!=null){
								dataHeight = data.height
							}
							this.list[i].top = tabHeight;
							tabHeight = tabHeight + dataHeight;
							this.list[i].bottom = tabHeight;
						}).exec();
					}
					this.load = false
				}
				let scrollTop = e.detail.scrollTop + 10;
				for (let i = 0; i < this.list.length; i++) {
					if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {
						this.verticalNavTop = (this.list[i].id - 1) * 50
						this.tabCur = this.list[i].id
						// console.log(scrollTop)
						return false
					}
				}
			},
			SubmitForm(e) {
				let pages = getCurrentPages()
				// console.log(pages)
				let prePage = pages[pages.length - 2]
				prePage.appData = prePage.appData.concat(this.select)
				//去除重复 利用reduce方法遍历数组,reduce第一个参数是遍历需要执行的函数，第二个参数是item的初始值
				let obj = {};
				prePage.appData = prePage.appData.reduce((item, next) => {
					if (!obj[next.id]) {
						item.push(next);
						obj[next.id] = true;
					}
					return item;
				}, []).reverse();
				//返回上页
				uni.navigateBack({
					delta: 1
				})
			},
			ItemClick(employ) {
				console.log(employ)
				employ.clicked = !employ.clicked
				if (employ.clicked) {
					this.select.push(employ)
				} else {
					this.select.splice(employ, 1)
					
				}
				this.setlectTip = `${this.i18n.selected} ${this.select.length} ${this.i18n.unit}`
			},
			InitData() {
				uni.request({
					url: this.$constant.BASEURL + this.$constant.GET_DEPART_TREE,
					method: "POST",
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						unitno: getApp().globalData.unitno,
						userid: getApp().globalData.userid
					},
					success: (res) => {
						if (res.data.code == 0) {
							let data = res.data.data
							this.getDepartment(data)
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'none'
							})
						}
					}
				});

			},
			getDepartment(departData) {
				console.log(departData)
				let that = this
				departData.forEach(function(item, index) {
					item.id = index
					that.list.push(item)
					//处理人员
					// if (item.employeelist instanceof Array && item.employeelist.length > 0) {
					// 	item.employeelist.forEach(function(employee) {
					// 		employee.clicked = false
					// 	})
					// }
					//判断是否还有子部门，有的话继续递归处理
					if (item.childDepartment instanceof Array && item.childDepartment.length > 0) {
						that.getDepartment(item.childDepartment)
					}
				})
			}
		},

	}
</script>

<style>
	.fixed {
		position: fixed;
		z-index: 99;
	}

	.VerticalNav.nav {
		width: 200upx;
		white-space: initial;
	}

	.VerticalNav.nav .cu-item {
		width: 100%;
		text-align: center;
		background-color: #fff;
		margin: 0;
		border: none;
		height: 50px;
		position: relative;
	}

	.VerticalNav.nav .cu-item.cur {
		background-color: #f1f1f1;
	}

	.VerticalNav.nav .cu-item.cur::after {
		content: "";
		width: 8upx;
		height: 30upx;
		border-radius: 10upx 0 0 10upx;
		position: absolute;
		background-color: currentColor;
		top: 0;
		right: 0upx;
		bottom: 0;
		margin: auto;
	}

	.VerticalBox {
		display: flex;
	}

	.VerticalMain {
		background-color: #f1f1f1;
		flex: 1;
	}

	.bottom-float {
		bottom: 0;
		width: 100%;
		position: fixed;
	}
</style>
